<template>
	<view>
		<custom-navigation-bar title="订单详情"></custom-navigation-bar>
		<view style="width: 100%;float: left;margin-top: 150rpx;"></view>
		<view class="list-item">
			<view class="list-shop-img">
				<image :src="order.thumbnail" class="list-shop-img1"></image>
			</view>
			<view class="list-item-content">
				<view class="list-item-content-title">
					{{order.name}}  
					<label class="status_def" v-if="order.status==0">待付款</label>
					<label class="status_def" v-if="order.status==1&&order.recharge_no==null">待使用</label>
					<label class="status_def" v-if="order.status==1&&order.recharge_no!=null">待充值</label>
					<label class="status_def" v-if="order.status==2">已完成</label>
					<label class="status_def" v-if="order.status==3">退款中</label>
					<label class="status_def" v-if="order.status==4">退款成功</label>
					<label class="status_def" v-if="order.status==5">已评论</label> 
				</view>  
				<view class="list-item-content-v" v-if="order.recharge_no!=null&&phone==1">
					充值号码：{{order.recharge_no}}
				</view> 
				
				<view class="list-item-content-v">
					订单金额：{{order.money}}&nbsp;&nbsp;数量：{{order.nums}}
				</view> 
				<view class="list-item-content-v" v-if="order.status==0">
					下单时间：{{order.create_time}}
				</view>
				<view v-if="order.status==1||order.status==2||order.status==5">
					<view  class="list-item-content-v" v-if="order.pay_time!=null">
						付款时间：{{order.pay_time}}
					</view>
					<view class="list-item-content-v" v-if="order.use_time!=null">
						使用时间：{{order.use_time}}
					</view>
				</view>
				<view  class="list-item-content-v" v-if="order.status==3">
					申请退款时间：{{order.refund_time}}
				</view>
				<view  class="list-item-content-v" v-if="order.status==4">
					退款时间：{{order.refund_time}}
				</view> 
			</view> 
			<view class="list-item-btn-box" v-if="order.status!=3&&order.status!=4&&order.status!=5&&isShow==1">
				<view class="list-item-btn" v-if="order.status==0" @click="pay">
					立即付款
				</view>
				<view class="list-item-btn" v-if="order.status==1&&order.recharge_no==null" @click="refund">
					申请退款
				</view>
				<view class="list-item-btn" v-if="order.status==2" @click="comment">
					立即评论
				</view>
			</view>
		</view>
		
		<view class="detail-info1" v-if="order.status==1&&isShow==1">
			<view class="goods_001">
				商品码
			</view>
			<view class="erweima_box">
				 <image :src="order.qrCode" style="width: 300rpx;height: 300rpx;"></image> 
			</view> 
		</view>
		
		<view class="detail-info1" v-if="order.recharge_no==null">
			<view class="goods_001">
				商户信息
			</view>
			<view class="goods_002">
				<image src="../../static/shop.png" class="detail-info1-item-img goods_002_1"></image>&nbsp;{{order.shop_name}}
			</view>
			<view class="goods_003" @click="openMap">
				<image src="../../static/ic_dizhi.png" class="detail-info1-item-img goods_003_1" ></image>&nbsp;{{order.position}}
			</view>
			<view class="goods_004" @click="openPhone">
				<image src="../../static/phone.png" class="detail-info1-item-img" style="float: left;margin-top: -2rpx;"></image>&nbsp;{{order.phone}}
			</view> 
			<view class="goods_005">
				<map @click="openMap" style="width: 100%; height: 200rpx;float: left;" :latitude="order.latitude" :longitude="order.longitude" >
				</map>
			</view> 
		</view>
		<view class="detail-info1" style="font-size: 25rpx;">
			<view class="detail-info1-xq">
				 邻里团购
			</view>
			<view v-for="(item,index) in order.deail_info" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1">
					<view class="xq-lable">{{item1.title}}</view>
					<view class="xq-content">{{item1.content}}</view>
				</view>
			</view>
			<view v-if="order.concise!=null&&order.concise!=''">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;品牌简介
				<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
				</view>
				<view class="detail-info1-xq-item" >
					{{order.concise}}
				</view>
			</view>
			<view v-if="order.advantage!=null&&order.advantage!=''">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;服务优势
				<image src="../../static/ysjt.png" style="width: 23rpx;height: 23rpx;margin-left: 10rpx;"></image>
				</view>
				<view class="detail-info1-xq-item" >
					{{order.advantage}}
				</view>
			</view>
			<view class="detail-info1-xq">
				 图文详情
			</view>
			<view style="width: 100%;height: 10rpx;float: left;"></view>
			<image v-for="(item,index) in order.detail_img" :key="index" :src="item" style="width: 100%;height: 500rpx;float: left;"></image> 
			<view class="detail-info1-xq">
				 购买须知
			</view>
			<view v-for="(item,index) in order.buy_notice" :key="index">
				<view class="detail-info1-xq-title">&nbsp;&nbsp;{{item.title}}</view>
				<view class="detail-info1-xq-item" v-for="(item1,index1) in item.detail" :key="index1"> 
					<view  style="width: 100%;">{{item1.content}}</view>
				</view>
			</view> 
			<view v-if="order.news!=null" >
				<view class="detail-info1-xq" style="height: 60rpx;line-height: 60rpx;font-size: 38rpx;text-align: left;">
					<label style="float: left;">平台声明</label> <image src="../../static/gfsm.png" style="width: 50rpx;height: 50rpx;margin-left: 12rpx;float: left;margin-top: 5rpx;"></image>
				</view>
				<view class="detail-info1-xq-item" style="background: #cccccc;">
					<view style="width: 100%;padding: 10rpx;">{{order.news.content}}</view>
				</view>
			</view>
			<view style="width: 100%;height: 20rpx;float: left;"></view>
		</view> 
		<view style="width: 100%;height: 70rpx;float: left;"></view>
		
	</view>
</template>

<script setup>
	import CustomNavigationBar from '@/components/CustomNavigationBar.vue';
	import { ref } from "vue"; 
	import http from '../../utils/http'; 
	const order=ref({
		name:""
	});
	const id=ref();
	const isShow=ref(1); 
	const phone=ref();
	import {
		onLoad,onShow,
		onPageScroll
	} from '@dcloudio/uni-app';
	onLoad((query) => {
		id.value=query.id; 
		getOrder();
		if(query.isShow){
			isShow.value=2;
		} 
		if(query.phone){
			phone.value=1;
		}
	})
	onShow(() => { 
		getOrder();
	})
	function comment(){
		uni.navigateTo({
			url: "/pages/order/comment?orderId="+id.value
		});
	}
	function refund(){
		uni.showLoading({
			title: '退款中',
			mask:true
		}); 
		
		http.request({
			url: "/wxPay/refund",
			method: "POST",
			data: {
				openId:getApp().globalData.user.openid,
				type:1,
				orderId:order.value.id
			}
		}).then((responseData) => {
			if(responseData.code==1){
				uni.navigateTo({
					url: "/pages/order/order?status=3"
				}); 
			} else{
				uni.hideLoading()
				uni.showModal({ 
					content:responseData.message ,//提示内容
					showCancel: false//不显示取消按钮
				})
			}
		}).catch((err) => {
			uni.hideLoading()
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
	}
	function pay(){
		uni.showLoading({
			title: '支付中',
			mask:true
		}); 
		
		http.request({
			url: "/wxPay/pay",
			method: "POST",
			data: {
				openId:getApp().globalData.user.openid,
				type:1,
				orderId:order.value.id
			}
		}).then((responseData) => {
			uni.hideLoading();
			if(responseData.code==1){
				wx.requestPayment({
					timeStamp: responseData.data.timeStamp,
					nonceStr: responseData.data.nonceStr,
					package: responseData.data.packageVal,
					signType: 'MD5',
					paySign: responseData.data.paySign,
					success (res) {
						console.log("支付成功")
						uni.hideLoading();
						uni.navigateTo({
							url: "/pages/order/order?status=1"
						});
					},
					fail (res) {
						console.log("取消支付")
						uni.hideLoading();
						uni.navigateTo({
							url: "/pages/order/order?status=0"
						});
					}
				})
			} else if(responseData.code==0){
				uni.hideLoading()
				uni.showModal({ 
					content:responseData.message ,//提示内容
					showCancel: false//不显示取消按钮
				})
			}
		}).catch((err) => {
			uni.hideLoading()
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			})
		})
	}
	
	function getOrder(){
		uni.showLoading({
		 	title: '数据加载中',
		 	mask:true
		}); 
		http.request({
			url: "/goods/order/detail",
			method: "POST",
			data: {
				id:id.value,
				openId:getApp().globalData.user.openid
			}
		}).then((responseData) => {
			uni.hideLoading(); 
			if(responseData.code==1){
				responseData.data.data.deail_info=JSON.parse(responseData.data.data.deail_info);
				responseData.data.data.detail_img=JSON.parse(responseData.data.data.detail_img);
				responseData.data.data.main_image=JSON.parse(responseData.data.data.main_image);
				responseData.data.data.buy_notice=JSON.parse(responseData.data.data.buy_notice);  
				order.value=responseData.data.data;
				console.log("aaa",order.value); 
			}  
		}).catch((err) => {
			uni.showToast({
				icon: 'error',
				title: '请求失败'
			});
			uni.hideLoading();
		})
	}
	function openMap(){
		console.log("111111"); 
		uni.openLocation({
		    latitude:order.value.latitude,
		    longitude: order.value.longitude,
		    name: order.value.address_name,
		    address: order.value.position,
		    success: function (res) {
		        console.log('打开系统位置地图成功')
		    },
		    fail: function (error) {
		        console.log(error)
		    }
		}) 
	}
	
	function openPhone(){
		uni.makePhoneCall({ 
		      phoneNumber:order.value.phone, // 电话号码
		      success: function () {
		        console.log('拨号成功');
		      },
		      fail: function () {
		        console.log('拨号失败');
		      }
		});
	}
	 
</script>

<style>
	@import "../list/list.scss"; 
	@import "../activity/detail.scss"; 
	.erweima_box{
		width: 100%;height: 300rpx;float: left;text-align: center;margin-top: 20rpx;margin-bottom: 20rpx;
	}
.goods_pl_41{
		width: 120rpx;height: 120rpx;float: left;margin-left: 10rpx;
	}
	.goods_pl_4{
		width: 94%;margin-left: 3%;float: left;height: auto;margin-bottom: 20rpx;margin-top: 10rpx;
	}
	.goods_pl_3{
		width: 94%;margin-left: 3%;float: left;height: auto;
	}
	.goods_pl_21{
		float: right;color: #cccccc;font-size: 22rpx;
	}
	.goods_pl_2{
		width: 94%;margin-left: 3%;float: left;height: 50rpx;line-height: 50rpx
	}
	.goods_pl_1{
		width: 94%;float: left;height:auto;margin-left: 3%;border-radius: 24rpx;background-color: white;margin-top: 20rpx;padding-top: 20rpx;
	}
	.goods_005{
		width: 84%;height: 220rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_004{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 25rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_00_p3{
		width: auto;border: red 3rpx solid;margin-left: 20rpx;padding-left: 10rpx;padding-right: 10rpx;padding-top: 2rpx;padding-bottom: 2rpx; border-radius: 15rpx;color: red;
	}
	.goods_00_p1{
		color: #cccccc;text-decoration: line-through
	}
	.goods_00_p{
		color: red;font-size: 34rpx;margin-right: 20rpx;
	}
	.goods_00_4{
		width: 94%;height: auto;float: left;margin-left: 3%;line-height: 25rpx;font-size: 22rpx;line-height: 50rpx;color: #cccccc;
	}
	.goods_00_3{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;margin-top: 10rpx;
	}
	.goods_00_2{
		width: 94%;height: 30rpx;float: left;margin-left: 3%;line-height: 25rpx;color: #cccccc;font-size: 22rpx;
	}
	.goods_00_1{
		width: 94%;height: 60rpx;float: left;margin-left: 3%;line-height: 60rpx;
	}
	.menu_box{
		height:70rpx;background: white;width: 94%;margin-left: 3%;border-radius: 20rpx;float: left;margin-top: 20rpx;line-height: 70rpx;
	}
	.menu_se{
		width: auto;margin-left:3%;color: #2AE8DC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.menu_def{
		width: auto;margin-left:3%;color: #CCCCCC;font-weight: bold;float: left;font-size: 28rpx;
	}
	.goods_001{
		width: 90%;height: 30rpx;float: left;margin-left: 5%;line-height: 30rpx;color:#545454;font-size: 22rpx;margin-top: 20rpx;font-size: 25rpx;text-align: center;
	}
	.goods_002{
		width: 84%;height: 30rpx;float: left;margin-left: 8%;line-height: 30rpx;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_003{
		width: 84%;line-height: 30rpx;float: left;margin-left: 8%;color:#545454;font-size: 22rpx;margin-top: 10rpx;font-size: 25rpx;
	}
	.goods_002_1{
		float: left;margin-top: -2rpx;
	}
	.goods_003_1{
		float: left;margin-top: -2rpx;
	}
</style>